import React from 'react';
import classnames from 'classnames';
import styles from './toggleBtn.less';

function ToggleBtn({
    type,
    onPress,
    color = '#333',
    size = 32,
    bgc = '#fff',
    during = 0.5,
}) {
    const wrapStyle = {
        width: `${size}px`,
        height: `${size}px`,
        margin: '0 auto',
        backgroundColor: bgc,
        borderRadius: '50%'
    };
    const spanStyle = {
        backgroundColor: color,
        transition: `transform ${during}s, top ${during}s, opacity ${during}s`,
    };
    const test = (e) => {
        e.preventDefault();
        onPress();
    };

    const span1 = classnames({
        _span: true,
        _span1: true,
        _leftSpan: type === false,
    });
    const span2 = classnames({
        _span: true,
        _span2: true,
        _middleSpan: type === false,
    });
    const span3 = classnames({
        _span: true,
        _span3: true,
        _rightSpan: type === false,
    });

    return (
        <div
            className={styles.toggleBtn}
            style={wrapStyle}
            onClick={test}
        >
            <span className={span1} style={spanStyle} />
            <span className={span2} style={spanStyle} />
            <span className={span3} style={spanStyle} />
        </div>
    );
}

export default ToggleBtn;
